<template>
	<view class="ul-list">
		<view class="list-item" v-for="dt in lists || []" :key="dt.id">
			<view class="con">
				<view class="imgbox" @click="goPage(dt)">
					<image class="img" :src="dt.imageUrl" mode="aspectFill"></image>
				</view>
				<view class="desc">
					<view class="bleft">
						<text class="title">{{dt.name}}</text>
					</view>
					<view class="bright" v-if="dt.topCategoryId==13">
						<view class="btn" @click.stop="openPop(dt)">加入</view>
					</view>
				</view>
				<view class="bright hzbtnbox" v-if="dt.topCategoryId==14">
					<view class="btn" @click.stop="openPop(dt,1)">需要服务</view>
					<!-- <view class="btn" @click.stop="openPop(dt,2)">成为志愿者</view> -->
					<view class="btn" @click.stop="volunteer(dt)">成为志愿者</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<add-form @complete="close" :id="curId" :topCtgId="topCtgId" :aidOrderType="aidOrderType"/>
		</uni-popup>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import addForm from './addForm.vue'
	import {setStorage,toast} from "@/utils/common.js"
	import {saveMemberInfo} from "@/api/index.js"
	export default defineComponent({
		components:{
			addForm
		},
		props:{
			lists:''
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo), 
				curId:'',
				topCtgId:'', // 顶级栏目
				aidOrderType:''  // 1需要服务，2成为志愿者
			})
			
			onMounted(()=>{
				
			})
			
			
			const openPop = (item,type='')=>{
				//console.log("item,type",item,type)
				state.curId = item.id
				state.topCtgId = item.topCategoryId
				state.aidOrderType = type
				proxy.$refs.popup.open('bottom')
			}
			
			const close = ()=> {
				proxy.$refs.popup.close()
			}
			
			const goPage = (item)=>{
				setStorage('keepDetails',JSON.stringify(item))
				uni.navigateTo({
					url:'/pages/keep/detail/detail'
				})
			}
			
			const volunteer = ()=>{
				if(state.userInfo.volunteerFlag==1){
					return toast('您已经是志愿者了！')
				}
				uni.showModal({
					title: '提示',
					content: '确定成为志愿者吗？',
					success: async (res)=> {
						if (res.confirm) {
							const rt = await saveMemberInfo({volunteerFlag:1})
							if(rt.code==0){
								toast('恭喜，您已成为志愿者！')
								store.commit('base/set_userInfo',{volunteerFlag:1})
							}
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			}
			
			return {
				...toRefs(state),
				openPop,
				goPage,
				close,
				volunteer
			}
		}
	})
</script>

<style lang="scss" scoped>
	.ul-list{
		box-sizing: border-box;
		width: 100%;
		padding: 0 15rpx;
		.list-item{
			box-sizing: border-box;
			float: left;
			width: 50%;
			padding: 0 10rpx 20rpx 10rpx;
			.con{
				background-color: #fff;
				box-shadow: 0 0 10rpx #e8e3d8;
				padding: 20rpx;
				border-radius: 12rpx;
				.imgbox{
					width: 100%;
					height: 200rpx;
					overflow: hidden;
					.img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.desc{
					display: flex;
					align-items: center;
					padding: 20rpx 0 0 0;
					.bleft{
						flex: 1;
						width: 0;
						.title{
							display: block;
							height: 50rpx;
							line-height: 50rpx;
							font-size: 28rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
						}
					}
					
				}
				.bright{
					.btn{
						width: 100rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 30rpx;
						background: #fba70e;
						font-size: 28rpx;
						color: #fff;
					}
					&.hzbtnbox{
						padding-top: 15rpx;
						.btn{
							display: block;
							width: 100%;
							&+.btn{
								margin-top: 15rpx;
							}
						}
						
					}
				}
			}
			
		}
		&::after{
			content: '';
			display: block;
			clear: both;
		}
	}
</style>
